<template>
  <div>
    <van-tabs color="#00CD00" title-active-color="#00CD00" title-inactive-color="#000000" animated swipeable>
      <van-tab title="运行中容器">
        <van-list>
          <van-cell icon="edit" @click="toContainerDetails(container)" :value="container.status" :label="container.created" :key="container" v-for="container in containersRunning">
            <view slot="title">
              <view>{{ container.containerNames }}</view>
              <van-tag type="success">{{ container.command }}</van-tag>
              <van-tag type="danger">{{ container.imageName }}</van-tag>
            </view>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="已停止容器">
        <van-list>
          <van-cell icon="edit" @click="toContainerDetails(container)" :value="container.status" :label="container.created" :key="container" v-for="container in containersStopped">
            <view slot="title">
              <view>{{ container.containerNames }}</view>
              <van-tag type="success">{{ container.command }}</van-tag>
              <van-tag type="danger">{{ container.imageName }}</van-tag>
            </view>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="容器">
        <van-list>
          <van-cell icon="edit" @click="toContainerDetails(container)" :value="container.status" :label="container.created" :key="container" v-for="container in containers">
            <view slot="title">
              <view>{{ container.containerNames }}</view>
              <van-tag type="success">{{ container.command }}</van-tag>
              <van-tag type="danger">{{ container.imageName }}</van-tag>
            </view>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="镜像">
        <van-list>
          <van-cell icon="points" @click="toImageDetails(image)" :title="image.imageNames" :label="image.created" :key="image" v-for="image in images"></van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
    <van-toast id="van-toast"></van-toast>
  </div>
</template>

<script>
  import dockerAPI from '@/api/dockerAPI'
  import dockerStore from '@/pages/docker/dockerStore'
  import Fly from 'flyio/dist/npm/wx'
  import Toast from '@/../static/vant-weapp/toast/toast'

  export default {
    name: 'list',
    data () {
      return {
        dockerServer: '',
        containersRunning: [],
        containersStopped: [],
        containers: [],
        images: []
      }
    },
    onShow () {
      wx.startPullDownRefresh()
    },
    onPullDownRefresh () {
      var that = this
      that.get()
    },
    methods: {
      get () {
        var that = this
        that.dockerServer = dockerStore.state.dockerServer
        // setTimeout(() => {
        //   that.getContainersRunning()
        // }, 2000) // 延时2s执行
        that.getContainers()
        that.getImages()
        wx.stopPullDownRefresh()
      },
      getContainersRunning () {
        var that = this
        var param = {
          url: that.dockerServer.url,
          secret: that.dockerServer.secret,
          all: false
        }
        dockerAPI.getContainers(param).then(result => {
          that.containersRunning = result.data
        })
      },
      getContainers () {
        var that = this
        var param = {
          url: that.dockerServer.url,
          secret: that.dockerServer.secret,
          all: true
        }
        dockerAPI.getContainers(param).then(result => {
          that.containers = result.data
          that.containersRunning = that.containers.filter((container) => {
            return container.state === 'running'
          })
          that.containersStopped = that.containers.filter((container) => {
            return container.state === 'exited'
          })
        })
      },
      getImages () {
        var that = this
        var param = {
          url: that.dockerServer.url,
          secret: that.dockerServer.secret
        }
        dockerAPI.getImages(param).then(result => {
          that.images = result.data
        })
      },
      toContainerDetails (container) {
        dockerStore.commit('setContainer', container)
        wx.navigateTo({
          url: '/pages/docker/containerDetails'
        })
      },
      toImageDetails (image) {
        dockerStore.commit('setImage', image)
        wx.navigateTo({
          url: '/pages/docker/imageDetails'
        })
      },
      list () {
        var that = this
        const request = that.dockerRequest()
        request.get('info')
        request.get('images/json')
        request.get('containers/json?size=true&all=true')
        request.get('containers/json?size=true&all=false')
      },
      dockerRequest () {
        var that = this
        const fly = new Fly()
        fly.config.baseURL = that.dockerServer.url
        fly.interceptors.request.use((request) => {
          Toast.loading({
            message: '加载中...',
            duration: 0,
            forbidClick: true
          })
          request.headers = {
            'X-Tag': 'flyio',
            'content-type': 'application/json',
            'H-secret': that.dockerServer.secret
          }
          return request
        })
        fly.interceptors.response.use(
          (response) => {
            Toast.clear()
            console.log(response.data)
            return response.data
          },
          (error) => {
            Toast.clear()
            console.log(error.response.data)
            return error.response.data
          }
        )
        return fly
      }
    }
  }
</script>

<style scoped>
</style>
